<template>
    <div class="weixin-card-container" :style="cardCss">
        <img :src="data.options.avatarDefaultValue" v-if="data.options.isShowAvatar" class="avatar">
        <div class="bd_content">
            <h3
                :style="{
                    'fontSize': data.options.titleFontSize,
                    'color': data.options.color
                }"
            >{{ data.options.defaultValueCName }}</h3>
            <div
                class="desc_content"
                :style="{
                    'fontSize': data.options.descFontSize,
                    'color': data.options.descColor
                }"
            >{{ data.options.descDefaultValueCName }}</div>
        </div>
        <div
            class="foot_content"
            :style="{
                'fontSize': data.options.timeFontSize,
                'color': data.options.timeColor
            }"
        >{{ data.options.timeDefaultValueCName }}</div>
    </div>
</template>
<script>
export default {
    name: 'WeixinCard',
    props: {
        data: {
            type: Object
        }
    },
    computed: {
        cardCss() {
            return {
                'background': 'linear-gradient(to ' + this.data.options.direction + ', ' + this.data.options.color1 + ', ' + this.data.options.color2 + ')',
                'color': this.data.options.color,
                'fontSize': this.data.options.fontSize
            }
        }
    }
}
</script>
